<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>
        // 最流氓最简单粗暴的方式
        let strHTML = `
        <ul>
        <li>Java</li>
        <li>JavaScript</li>
        <li>Python</li>
        <li>Swift</li>
    </ul>`
        document.body.innerHTML = strHTML
        const oList = document.querySelector('ul')
        console.log(oList.innerHTML)

        // 古老的方式
        const oFrag = document.createDocumentFragment() // 防止过多的reflow
        const oElement = document.createElement('ul')
        const createElement = (element, text) => {
            let oItem = document.createElement(element)
            let oText = document.createTextNode(text)
            oItem.appendChild(oText)
            oElement.appendChild(oItem)
        }

        createElement('li','java')
        createElement('li','javascript')
        createElement('li','python')
        createElement('li','swift')
        oFrag.appendChild(oElement)
        document.body.appendChild(oFrag)

    </script>
</body>
</html>